import styles from './CommentFooter.module.scss';

type Props = {
  // normal 普通评论
  // reply 回复评论
  type?: 'normal' | 'reply';
  onShowComment?: () => void;
};

export const CommentFooter = ({ type = 'normal', onShowComment }: Props) => {
  return (
    <div className={styles.root}>
      <div className="input-btn">
        <svg className="icon">
          <use xlinkHref={'#iconbianji'}></use>
        </svg>
        <span>抢沙发</span>
      </div>

      {type === 'normal' && (
        <>
          <div className="action-item" onClick={onShowComment}>
            <svg className="icon">
              <use xlinkHref={'#iconbtn_comment'}></use>
            </svg>
            <p>评论</p>
            {!!1 && <span className="bage">{1}</span>}
          </div>
          <div className="action-item">
            {true ? (
              <svg className="icon">
                <use xlinkHref={'#iconbtn_like_sel'}></use>
              </svg>
            ) : (
              <svg className="icon">
                <use xlinkHref={'#iconbtn_like2'}></use>
              </svg>
            )}

            <p>点赞</p>
          </div>
          <div className="action-item">
            {true ? (
              <svg className="icon">
                <use xlinkHref={'#iconbtn_collect_sel'}></use>
              </svg>
            ) : (
              <svg className="icon">
                <use xlinkHref={'#iconbtn_collect'}></use>
              </svg>
            )}
            <p>收藏</p>
          </div>
        </>
      )}

      {type === 'reply' && (
        <div className="action-item">
          {true ? (
            <svg className="icon">
              <use xlinkHref={'#iconbtn_like_sel'}></use>
            </svg>
          ) : (
            <svg className="icon">
              <use xlinkHref={'#iconbtn_like2'}></use>
            </svg>
          )}
          <p>点赞</p>
        </div>
      )}

      <div className="action-item">
        <svg className="icon">
          <use xlinkHref={'#iconbtn_share'}></use>
        </svg>
        <p>分享</p>
      </div>
    </div>
  );
};
